<template>
  <!-- 修改资料 -->

  <div>
        <el-form label-width="85px" :model="form" label-position="right" ref="formRef" :rules="formRules"
          enctype="multipart/form-data">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>基本信息</span>
              </div>
            </template>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="公司" prop="companyId">
                  <el-select v-model="form.companyId" clearable placeholder="请选择：" @change = "handleCompany('change')">
                    <el-option v-for="item in configData.companyList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="部门" prop="deptId">
                  <el-tree-select v-model="form.deptId" :data="deptData" :render-after-expand="false"
                    :check-strictly=true />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="工号" prop="number">
                  <el-input v-model="form.number" style="width: 300px;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="form.name" style="width: 300px;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="职位" prop="positionId">
                  <el-tree-select v-model="form.positionId" :data="positionData" :render-after-expand="false"
                    :check-strictly=true />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="入司日期" prop="inDate">
                  <el-date-picker v-model="form.inDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择"
                    style="width: 300px;" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <template #header>
              <div class="card-header">
                <span>联系方式</span>
              </div>
            </template>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="电话" prop="phone">
                  <el-input v-model="form.phone" style="width: 300px;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="form.email" style="width: 300px;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="即时通" prop="messageNo">
                  <el-input v-model="form.messageNo" style="width: 300px;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="地址" prop="address">
                  <el-input v-model="form.address" style="width: 300px;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <template #header>
              <div class="card-header">
                <span>详细信息</span>
              </div>
            </template>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="身份证号" prop="idCard">
                  <el-input v-model="form.idCard" style="width: 300px;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="英文名" prop="englishName">
                  <el-input v-model="form.englishName" style="width: 300px;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="人员类别" prop="employeeKind">
                  <el-select v-model="form.employeeKind" clearable placeholder="请选择：">
                    <el-option v-for="item in configData.emKindList" :key="item.value" :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="学历" prop="degree">
                  <el-select v-model="form.degree" clearable placeholder="请选择：">
                    <el-option v-for="item in configData.degreeList" :key="item.value" :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="生日" prop="birthday">
                <el-date-picker v-model="form.birthday" type="date" value-format="YYYY-MM-DD" placeholder="请选择"
                  style="width: 300px;" />
              </el-form-item>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="部门负责人" prop="1">
                  <el-radio-group v-model="form.deptLeader" style="margin-top: -4px;">
                    <el-radio label="1" size="large">是</el-radio>
                    <el-radio label="0" size="large">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="公司负责人" prop="companyLeader">
                  <el-radio-group v-model="form.companyLeader" style="margin-top: -4px;">
                    <el-radio label="1" size="large">是</el-radio>
                    <el-radio label="0" size="large">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="状态" prop="status">
                  <el-select v-model="form.status">
                    <el-option v-for="item in configData.statusList" :key="item.value" :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="性别" prop="gender">
                  <el-radio-group v-model="form.gender" style="margin-top: -4px;">
                    <template v-for="(item, index) in configData.genderList" :key="index">
                      <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                    </template>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <template #header>
              <div class="card-header">
                <span>照片备注</span>
              </div>
            </template>
            <el-row>
              <el-col>
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="form.remark" style="width: 600px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="上传照片" prop="file">
                <el-upload ref="uploadRef" :class="{ 'hide': hideUpload }" :file-list="fileList" action="" :limit="1"
                  list-type="picture-card" :on-change="handleChange" :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove" :http-request="submitUpload" drag>
                  <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
                  <el-icon class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                  <template #tip>
                    <div class="el-upload__tip">
                      可拖拽
                    </div>
                  </template>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                  <img :src="dialogImageUrl" alt="Preview Image" w-full style="width: 100%" />
                </el-dialog>
              </el-form-item>
            </el-row>
          </el-card>
        </el-form>
        <div class="button-position">
          <el-button @click="updateVisible">取 消</el-button>
          <el-button type="primary" @click="updateUser(formRef)">确 定</el-button>
        </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { Plus, UploadFilled } from "@element-plus/icons-vue";
import { ElNotification } from 'element-plus';
import Api from '@/api/model/user'
const emit = defineEmits(['updatetable'])
const props = defineProps({
  paramsData: {
    type: Object,
    defalut: {},
  },
});
onMounted(() => {
  getData();
});
const dialogVisible = ref(false);
const dialogImageUrl = ref();
const hideUpload = ref(true);
const fileList = ref([
  {
    name: '',
    url: ''
  },
]);

// 查看用户数据的对象
const form = ref({});
const formRef = ref();
const formRules = reactive({
})

const updateVisible = () => {
  emit('updatetable')
};
const configData = ref({})
const deptData = ref([]);
const positionData = ref([]);

const getInit = async () => {
  let listRes = await Api.employee.add.post();
  configData.value = listRes.configData
  
  let deptParams = {
        fileName: 'DeptTreeReport',
        fieldMap: {
            companyId:form.value.companyId
        }
    }
  let positionParams = {
    fileName: "PositionTreeReport",
  };
  let positionTreeRes = await Api.position.positionTree.post(
    positionParams
  );
  let deptTreeRes = await Api.dept.DeptTree.post(deptParams);
  deptData.value = deptTreeRes.reportData;
  positionData.value = positionTreeRes.reportData;

};
const handleCompany = async(val)=>{
    let param ={
      fileName: 'DeptTreeReport',
        fieldMap:{
            companyId:form.value.companyId
        } 
    }
    let res = await Api.position.positionTree.post(param);
    if(res.code =='200'){
        deptData.value = res.reportData
        if(val ==='change'){
            form.value.deptId = ''
        }
    }

}
const getData = async () => {
  // let params = params.value;
  let res = await Api.employee.detail.post(
    props.paramsData
  )
  console.log(res.data)
  if (res.code == 200) {
    res.data.file = undefined
    form.value = res.data;
    if(form.value.companyId){
      handleCompany()
    }
    if (res.data.fileFullPath !== '') {
      hideUpload.value = true
      fileList.value[0].url = res.data.fileFullPath;
    }
    else {
      hideUpload.value = false
      fileList.value = []
    }
    getInit()
  }
};

const handlePictureCardPreview = (file) => {
  //console.log(fileList)
  if (fileList.value.length > 0) {
    dialogImageUrl.value = fileList.value[0].url;
  }
  else {
    dialogImageUrl.value = URL.createObjectURL(file.raw)
  }
  dialogVisible.value = true;
};

const handleChange = (file, fileList) => {
  console.log(fileList)
  hideUpload.value = fileList.length > 0;
};

const handleRemove = (file, fileList) => {
  console.log(fileList)
  hideUpload.value = fileList.length > 0;
  form.value.file = undefined
  form.value.deleteFlag = '1'
};

const updateUser = async (formRef) => {
  await formRef.validate((valid, fields) => {
    if (valid) {
      update();
    }
  });
};
const restAddFormData = () => {
  formRef.value.resetFields();
};
const uploadRef = ref(null);
const submitUpload = (data) => {
  form.value.file = data.file
};
const update = async () => {
  let params = {
    bean: form.value,
  }
  //console.log(form.value)
  let res = await Api.employee.update.post(params);
  if (res.code == 200) {
    fileList.value = [];
    restAddFormData();
    ElNotification.success({
      title: "",
      message: "更新成功！",
      duration: 2000,
    });
    emit("updatetable",true);
  }
};
</script>

<style lang="less" scoped>
.el-card {
  margin-bottom: 20px;
}

:deep(.el-upload) {
  --el-upload-dragger-padding-horizontal: 54px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

:deep(.el-upload-dragger) {
  border: 0px;
}

.hide {
  :deep(.el-upload--picture-card) {
    display: none;
  }
}
</style>

